/**
 * 设备控制
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Button, Input, Card, Row, Col, Form, Modal, Switch, InputNumber, Select } from 'antd';
const confirm = Modal.confirm;

const styles = {
    input: {
        display: 'inline-block',
        width: '20em'
    },
    detail: {
        width: '100%',
        minHeight: '380px',
        overflow: 'hidden'
    },
    rowContainer: {
        border: '1px solid #fff'
    },
    rowStyle: {
        paddingTop: '15px'
    },
    select: {
        width: '10em'
    },
};


class DetailControl extends Component {

    onControl = () => {
        const { device: { detailData }, dispatch, form: { validateFields } } = this.props;
        validateFields((err, value) => {
            const commands = {};
            for (const k in value) {
                if (typeof value[k] !== 'undefined') commands[k] = value[k];
            }
            confirm({
                title: '确定下发指令?',
                content: JSON.stringify(commands),
                onOk() {
                    dispatch({
                        type: 'device/control',
                        payload: {
                            sno: detailData.sno,
                            attrs: commands
                        }
                    });
                },
                onCancel() {

                },
            });
        });
    }

    makeControlBtn = (arr) => {
        if (!arr || arr.length <= 0) return;
        const result = [];
        let i = 0;
        for (i = 0; i < arr.length; i++) {
            if (i % 2 === 0 && ((i + 1) < arr.length)) {
                const btns = [];
                btns.push(this.makeBtn(arr[i]));
                btns.push(this.makeBtn(arr[i + 1]));
                result.push(<Row gutter={16} style={styles.rowStyle}>{btns}</Row>);
                i++;
            } else if (i % 2 === 0 && ((i + 1) === arr.length)) {
                result.push(<Row gutter={16} style={styles.rowStyle}>{this.makeBtn(arr[i])}</Row>);
            } else if (i % 2 === 1 && ((i + 1) === arr.length)) {
                result.push(<Row gutter={16} style={styles.rowStyle}>{this.makeBtn(arr[i])}</Row>);
            }
        }
        return result;
    }

    makeBtn = (obj) => {
        const json = JSON.parse(obj.command);
        const { getFieldDecorator } = this.props.form;
        if (json.type === 'bool') {
            return (<Col span={8}>
                <p>{obj.name}</p>
                {getFieldDecorator(json.name, {
									initialValue: obj.value === 1
                })(<Switch checkedChildren={json.value.true} defaultChecked={obj.value === 1} unCheckedChildren={json.value.false} onChange={this.changeSwtich} />)}
            </Col>);
        } else if (json.type.indexOf('uint') >= 0) {
            return (<Col span={8}>
                <p>{obj.name}</p>
                {getFieldDecorator(json.name, {
									initialValue: obj.value
                })(<InputNumber min={json.value.min} defaultValue={obj.value} max={json.value.max} step={json.value.step} />)}
            </Col>);
        } else if (json.type === 'enum') {
            return (<Col span={8}>
                <p>{obj.name}</p>
                {getFieldDecorator(json.name, {
									initialValue: obj.value
                })(<Select style={styles.select} defaultValue={obj.value} >{this.foreachOption(json.value)}</Select>)}
            </Col>);
        } else if (json.type === 'binary') {
            const length = json.value.length;
            return (<Col span={8}>
                <p>{obj.name}</p>
                {getFieldDecorator(json.name, {
										initialValue: obj.value,
                    rules: [{ len: { length } }],
                })(<Input style={styles.input} defaultValue={obj.value} />)}
            </Col>);
        }
    }

    foreachOption = (arr) => {
        const result = [];
        arr.forEach((obj) => {
            for (const key in obj) {
                result.push(<Option value={key}>{obj[key]}</Option>);
            }
        });
        return result;
    }

    render() {
				const { device: { detailData } } = this.props;
        return (
            <div style={styles.rowContainer}>
                <Form>
                    {this.makeControlBtn(detailData.controlCommands)}
                </Form>
                <br />
                <Button type="primary" onClick={this.onControl}>控制</Button>
            </div>
        );
    }

}


export default connect(({ device }) => ({ device }))(Form.create({})(DetailControl));

